<template>
<!--  <div v-for="item in chapter" :key="chapter.chaId">-->

<!--  </div>-->
  <div class="common-layout">
    <el-container>
      <el-header class="el-header">
        <h1>HTML 教程- (HTML5 标准)</h1>
        <el-button type="primary" >课程</el-button>

      </el-header>
      <el-container>
        <el-aside width="200px" class="el-aside">
          <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
          >
            <el-sub-menu index="1">
              <template #title>
                <el-icon><location /></el-icon>
                <span>章节目录</span>
              </template>

                <el-menu-item  v-for="chapter in chapter" :key="chapter.chaName">
                  <router-link replace class="el-menu-item"
                               :to="{name:'ChapterContent',query:{chaId:chapter.chaId}}">

                    {{ chapter.chaName}}
                  </router-link>
                </el-menu-item>

            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "CourseDetial",
  data() {
    return{
      courseId:'',
      chapter:[]
    }
  },
  mounted() {
    let _this = this;
    //根据商品ID获得商品的详细信息(ajax)
    _this.courseId= this.$route.query.courseId
    console.log(_this.courseId)
    let url = "/studyadmin/chapter/chapterByCourseId";
    _this.$axios.get(url,{params:{courseId:_this.courseId}}).then(function(serverData){
      // console.log("服务端返回的数据为:",serverData);

      //取出服务端返回商品数据，添加了当前vue实例的data属性中
      if(serverData.data.code==0){
        let courseList = serverData.data.data;
        // console.log(courseList)
        for(let i=0;i<courseList.length;i++){
          _this.chapter.push(courseList[i]);
        }
        console.log(_this.chapter)
      }

    }).catch(function(error){
      console.log("异步请求发生了错误:",error);
    })
  }
}
</script>

<style scoped>
.el-header{
  /*background-color: #747bff;*/
}
.el-aside{
  background-color: beige;
}
.el-menu-item{
  text-decoration: none;

}
</style>
